<template>
	<view class="goshop-msg-page">
		<view class="goshop-msg-container">
			<!-- 空白页 -->
			<u-empty v-if="isEmpty === true && newsDataList.length === 0" :text="emptyText" mode="list"></u-empty>
			
			<view class="goshop-msg-wrap" v-for="(item,index) in newsDataList" :key="index">
				<view class="goshop-msg-time">
					{{item.createTime}}
				</view>
				<view class="goshop-msg-box">
					<view class="goshop-msg-title">{{item.title}}</view>
					<view class="goshop-msg-content">
						<rich-text :nodes="item.content|formatRichText"></rich-text>	
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import {newsPage,newsRead} from '@/common/http.api.js'
	export default {
		data() {
			return {
				//加载更多标志
				loadMoreFlag:false,
				isEmpty:false,
				newsDataList: [],
				ids:[],
				loadStatus: 'loadmore',
				emptyText:'',
				loadingText: '',
				loadmoreText: '',
				nomoreText: '',
				params: {
					pageNo: 1,
					typeId: 0, 
					pageSize: 10,
				},
			};
		},
		onReachBottom() {
			if(this.loadMoreFlag){
			  this.getNewsPage()
			}
		},
		onPullDownRefresh() {
			this.params.pageNo = 1
			this.newsDataList = []
			this.getNewsPage()
		},
		onLoad(){
			this.getNewsPage()	
		},
		filters: {
			/**
			 * 处理富文本里的图片宽度自适应
			 * 1.去掉img标签里的style、width、height属性
			 * 2.img标签添加style属性：max-width:100%;height:auto
			 * 3.修改所有style里的width属性为max-width:100%
			 * 4.去掉<br/>标签
			 * @param html
			 * @returns {void|string|*}
			 */
			formatRichText (html) { //控制小程序中图片大小
				let newContent= html.replace(/<img[^>]*>/gi,function(match,capture){
					match = match.replace(/style="[^"]+"/gi, '').replace(/style='[^']+'/gi, '');
					match = match.replace(/width="[^"]+"/gi, '').replace(/width='[^']+'/gi, '');
					match = match.replace(/height="[^"]+"/gi, '').replace(/height='[^']+'/gi, '');
					return match;
				});
				newContent = newContent.replace(/style="[^"]+"/gi,function(match,capture){
					match = match.replace(/width:[^;]+;/gi, 'max-width:100%;').replace(/width:[^;]+;/gi, 'max-width:100%;');
					return match;
				});
				newContent = newContent.replace(/<br[^>]*\/>/gi, '');
				newContent = newContent.replace(/\<img/gi, '<img style="max-width:100%;height:auto;display:inline-block;margin:10rpx auto;"');
				return newContent;
			}	
		},
		onShow(){
		  this.refresh();	
		},
		methods:{
			refresh(){
				this.emptyText = this.$t('common.empty.text');
				this.loadingText = this.$t('common.loading.text');
				this.loadmoreText = this.$t('common.loadmore.text');
				this.nomoreText = this.$t('common.nomore.text');
			},
			doNewsRead(){
				newsRead({ids:this.ids}).then((res)=>{}).catch(error=>{
					console.error(error)
				})
			},
			getNewsPage(){
				this.loadStatus = 'loading';
				newsPage(this.params).then((res)=>{
					this.ids=[];
					uni.stopPullDownRefresh()
					if(res.code === 0){
					  if(res.data.list.length === 0){
						this.isEmpty = true;
						this.loadStatus = 'nomore'
						this.loadMoreFlag = false;
					  }else if (res.data.list.length < 10) {
						this.loadStatus = 'nomore'
						this.loadMoreFlag = false;
					  } else {
						this.params.pageNo++;
						this.loadStatus = 'loading'
						this.loadMoreFlag = true;
					  }
					  debugger
					  if(res.data.list.length > 0){
						  for (var i = 0; i < res.data.list.length; i++) {
						  		let item = res.data.list[i];
						  	   this.ids.push(item.id);
						  }
						  this.doNewsRead();
					  }

					  if (this.params.pageNo > 1) {
						this.newsDataList = this.newsDataList.concat(res.data.list);
					  } else {
						this.newsDataList = res.data.list;
					  }
					}
				  }).catch(error=>{
					console.error(error)
				  })
			},
		}
	}
</script>

<style lang="scss">
.goshop-msg-container{
	padding: 20rpx;
	.goshop-msg-wrap{
		margin-bottom: 20rpx;
		.goshop-msg-time{
			display: flex;
			align-items: center;
			justify-content: center;
			padding: 20rpx 0;
		}
		.goshop-msg-box{
			border-radius: 10px;
			padding: 20rpx;
			background-color: $goshop-color-auxiliary-one;
			.goshop-msg-title{
				font-weight: bold;
				font-size: $goshop-font-size-lg;
			}
			.goshop-msg-content{
				margin-top: 20rpx;
				font-size: $goshop-font-size-base;
			}
		}
	}
}
</style>
